<template>
	<view class="wanl-page wanlshop-container wanl-list">
		<!-- 导航条 -->
		<view :style="{ backgroundImage : 'url(' + $wanlshop.oss('/uploads/20231101/2c03b21d093f2e41de60fc32916ea030.jpg') + ')'}">
			<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
				<view class="cu-bar fixed" :style="{
					height: $wanlshop.wanlsys().height + 'px', 
					paddingTop: $wanlshop.wanlsys().top + 'px',
					color: '#ffffff'
				}">
					<view class="action" @tap="$wanlshop.back(1)">
						<text class="wlIcon-fanhui1"></text>
					</view>
					<view class="content" :style="{top: $wanlshop.wanlsys().top + 'px'}">
						挂号就诊
					</view>
				</view>
			</view>
			
			<view class="wanlshop-container__head">
				<view class="navigater flex align-center justify-between address padding-right-bj">
					<view class="flex">
						<view class="text-lg flex text-white" @tap="$wanlshop.to('/pages/page/city')">
							<text>{{common.addressText}}</text>
							<text style="margin-top: 16rpx;font-size: 26rpx;"
								class="wlIcon-jiang text-df margin-top"></text>
						</view>
					</view>
					<view class="search flex align-center margin-lr-xs round">
						<view class="icon text-df text-bold wanl-gray-dark">
							<text class="wlIcon-sousuo1"></text>
						</view>
						<swiper vertical autoplay circular interval="3000">
							<swiper-item @tap="handleSearch('')">
								<text class="text-white text-cut">搜医院、医生、科室、疾病和症状</text>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>
		<wanl-scroll-list ref="list" :option="{page: 1,auto: true,safeArea: true}" @load="load($event,'load')" @refresh="load($event,'refresh')">
		<view class="padding-top-xs" style="background-repeat: repeat-x;" :style="{ backgroundSize : '100%', backgroundImage : 'url(' + $wanlshop.oss('/uploads/20231101/2c03b21d093f2e41de60fc32916ea030.jpg', 0, 50, 1, 'transparent', 'png') + ')',backgroundPosition: `0 -${($wanlshop.wanlsys().height + h) + 'px'}`}">
		<view class="body-view">
			<!-- 使用scroll-view实现tabs滑动切换 -->
			<scroll-view class="top-menu-view" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
				<view class="menu-topic-view" v-for="(item,index) in tabs" :id="'tabNum'+item.id" :key="index"
					@click="swichMenu(index)">
					<view class="flex flex-direction align-center justify-center" :class="currentTab==index ? 'menu-topic-act' : 'menu-topic'">
						<image v-if="currentTab == index" :src="item.icon" mode="widthFix"></image>
						<image v-else :src="item.icon_select" mode="widthFix"></image>
						<text class="menu-topic-text">{{item.name}}</text>
					</view>
				</view>
			</scroll-view>
			<!-- 内容 -->
			<swiper class="swiper-box-list" :current="currentTab" @change="swiperChange">
				<swiper-item class="swiper-topic-list" v-for="(item,index) in tabs" :key="item.id">
					<!-- <view class="swiper-item" v-for="(data,key) in menu" @tap="toPages(data,index)" :key="key">
						<image :src="$wanlshop.oss(data.image)" mode="heightFix"></image>
						<text>{{data.name}}</text>
					</view> -->
					
					<swiper class="swiper-box-list">
						<swiper-item class="swiper-topic-list" v-for="(x,y) in Math.ceil(menu.length / 10)" :key="y">
							<block v-for="(data,key) in menu" :key="key">
								<view v-if="key < (y + 1)*10 && key >= y*10" class="swiper-item" @tap="toPages(data,index)" :key="key">
									<image :src="$wanlshop.oss(data.image)" mode="heightFix"></image>
									<text>{{data.name}}</text>
								</view>
							</block>
						</swiper-item>
					</swiper>
					
				</swiper-item>
			</swiper>
		</view>
		
		<view class="record flex justify-between align-center bg-white" @tap="$wanlshop.auth('/pages/user/record/register/order')">
			<view class="flex align-center left">
				<text class="iconfont icon-jilu"></text>
				<text>我的挂号记录</text>
			</view>
			<view class="more">
				<text>更多</text>
				<text class="wlIcon-fanhui2"></text>
			</view>
		</view>
		
		<view class="lists">
			<block v-for="(item,index) in register_type" :key="index">
				<view class="items flex-direction" @tap="$wanlshop.to(`/pages/medicalcare/bookingsystem/registered?id=${item.id}&title=${item.name}`)" v-if="index < 2">
					<view>{{item.name}}</view>
					<view class="text-cut">{{item.content}}</view>
					<view class="flex justify-start align-center"> <text>去预约</text><text class="wlIcon-fanhui2"></text> </view>
				</view>
			</block>
		</view>
		
		<view class="ad">
			<wanl-banner height="72px" :banner="banner" img="media" link="url" />
		</view>
		
		<view class="server bg-white">
			<view class="head padding-lr">
				<view class="title">
					<text class="margin-right-sm text-bold">
						医院挂号
						<image :src="$wanlshop.oss('/uploads/staticImage/images/default/title.png')" mode="widthFix"></image>
					</text>
				</view>
				<view class="more" @tap="$wanlshop.to('/pages/medicalcare/bookingsystem/department')">
					<text>全部{{total}}家医院</text> <text class="wlIcon-fanhui2"></text>
				</view>
			</view>
		</view>
		<view class="head bg-white">
			<!-- <view class="">
				<view class="bar" style="justify-content: space-around;">
					<view class="item" :class="{ current: filterIndex === 1 }" @tap="show = true">
						<text>区域</text>
						<view class="box">
							<text :class="{ active: priceOrder === 1 && filterIndex === 3 }"
								class="wlIcon-sheng"></text>
							<text :class="{ active: priceOrder === 2 && filterIndex === 3 }"
								class="wlIcon-jiang"></text>
						</view>
					</view>
					<view class="item" :class="{ current: filterIndex === 3 }" @tap="show = true">
						<text>筛选</text>
						<view class="box">
							<text class="icon-shaixuan1 iconfont margin-left-xs" style="font-size: 22rpx;"></text>
						</view>
					</view>
		
				</view>
			</view> -->
			<wanl-filter @submit="submit" class="margin-bottom-sm" :district="district"></wanl-filter>
		</view>
		<wanl-empty style="padding: 0 0 40rpx 0;" v-if="goodsData.length == 0"></wanl-empty>
		<view v-for="(order, okey) in goodsData" :key="okey" class="order-items radius-bock" @tap="$wanlshop.to(`/pages/medicalcare/bookingsystem/hospital?id=${order.id}`)">
			<image :src="$wanlshop.oss(order.image)" mode="aspectFill"></image>
			<view class="right flex flex-direction">
				<text class="title">{{order.title}}</text>
				<view class="desc text-cut">
					<text class="t">重点科室：</text>
					<view class=""> <block v-for="(data,k) in order.sections_text" :key="k">{{data.name}}{{k+1 < order.sections_text.length ? '、' : ''}}</block> </view>
				</view>
				<text class="address text-cut">{{$wanlshop.getDistance(common.location,order)}} | {{order.address}}</text>
				<view class="tags">
					<text>{{order.grade_text}}</text>
					<text v-for="(d,k) in order.tags_text" :key="k">{{d}}</text>
				</view>
			</view>
		</view>


		</view>
		</wanl-scroll-list>
		<!-- <u-popup v-model="show" mode="top" :maskCustomStyle="{top:$wanlshop.wanlsys().height + 'px'}" :customStyle="{top:$wanlshop.wanlsys().height + 'px',backgroundColor:'rgba(0, 0, 0, 0.6)'}" duration="0" height="900rpx">
			<wanl-filter @submit="submit" class="margin-bottom-sm" :district="district"></wanl-filter>
		</u-popup> -->
		<!-- <view class="WANL-MODAL text-sm" @touchmove.stop.prevent="() => {}">
			<view style="" class="cu-modal top-modal" :class="{show:show}"
				@tap="show = false">
				<view class="wanl-modal-menu cu-dialog" @tap.stop=""><wanl-directs @change="show = false" :top="$wanlshop.wanlsys().height"/></view>
			</view>
		</view> -->
	</view>
</template>

<script>
import permision from '@/common/permission';
	import {mapState,mapActions} from 'vuex';
	export default {
		data() {
			return {
				show: false,
				filterIndex: 0,
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				scrollLeft: 0,
				tabs: [{
						id: 1,
						type: "section",
						name: '科室',
						icon: require('@/static/images/medical/visit/icon/icon1.png'),
						icon_select: require('@/static/images/medical/visit/icon/icon1-1.png'),
					},
					{
						id: 2,
						type: "doctor",
						name: '医生',
						icon: require('@/static/images/medical/visit/icon/icon2.png'),
						icon_select: require('@/static/images/medical/visit/icon/icon2-1.png'),
					},
					{
						id: 3,
						type: "diease",
						name: '疾病',
						icon: require('@/static/images/medical/visit/icon/icon3.png'),
						icon_select: require('@/static/images/medical/visit/icon/icon3-1.png'),
					}
				],
				currentTab: 0,
				tabCurrent: 'tabNum1',
				menu:uni.getStorageSync('wanlshop:bookingmenu'),
				params: {
					page: 1,
					category_id:'',
					keyword:'',
					order_by:'', // 【sale_desc：价格降序；sale_asc：价格升序】
				},
				goodsData: [],
				reload: false, //判断是否上拉
				last_page: 0,
				status: 'loading',
				total: 0,
				contentText: {
					contentdown: '',
					contentrefresh: '正在加载..',
					contentnomore: '没有更多数据了'
				},
				banner:[],
				register_type:uni.getStorageSync('wanlshop:bookingtype'),
				district:[],
				form:{
					grade:'',
					nature:'',
					type:'',
					sections:'',
					tags:'',
					district:'',
				},
				h:0
			};
		},
		computed: {
			...mapState(['common'])
		},
		watch: {
		    'common.cityId': {
		        handler(newVal, oldVal) {
					if(newVal && oldVal) {
						this.$refs.list.refreshScrollView()
						this.load({page:1},'refresh')
					}
		        },
		        deep: true,
		        immediate: true
		    }
		},
		onLoad(option) {
			this.h = uni.upx2px(86);
			if(option.type) {
				this.currentTab = option.type;
			}
			this.getCategory(this.tabs[this.currentTab].type)
			this.getAdvert()
		},
		methods: {
			// 加载数据
			load(paging,key) {
				uni.request({
					url: `/addons/internethospital/api.hospital/lists`,
					data: {
						page: paging.page,
						city_id: uni.getStorageSync('cityid'),
						grade:this.form.grade,
						nature:this.form.nature,
						type:this.form.type,
						sections:this.form.sections,
						tags:this.form.tags,
						district:this.form.district
					},
					success: res => {
						let goodsData = res.data.data;
						if(key == 'load') {
							this.goodsData = [...this.goodsData, ...goodsData];
							this.$refs.list.loadSuccess({ list: this.goodsData, total: res.data.total });
							this.total = res.data.total
						} else if(key == 'refresh') {
							this.goodsData = goodsData;
							this.$refs.list.refreshSuccess({ list: this.goodsData, total: res.data.total });
							this.total = res.data.total
						}
						this.$refs.list.showEmpty = false;
					}
				});
			},
			toPages(data,index) {
				let type = this.tabs[index].type
				if(type == "doctor") {
					this.$wanlshop.to(`/pages/medicalcare/bookingsystem/registered?id=${data.id}&title=${data.name}`)
				}else if(type == "diease") {
					this.$wanlshop.to(`/pages/medicalcare/bookingsystem/search?key=${data.name}&id=${data.id}&title=${data.name}`)
				} else {
					this.$wanlshop.to(`/pages/medicalcare/bookingsystem/department?key=${data.name}&id=${data.id}&title=${data.name}`)
				}
			},
			async getAdvert(){
				await uni.request({
					url: '/publics/advert/content',
					method: 'post',
					data: {
						position:'internethospital_index_advert'
					},
					success: res => {
						this.banner = res.data;
					}
				});
				await uni.request({
					url: '/addons/internethospital/api.index/register_type',
					method: 'post',
					success: res => {
						this.register_type = res.data;
						uni.setStorageSync('wanlshop:bookingtype',res.data)
					}
				});
				await uni.request({
					url: '/addons/internethospital/api.hospital/district',
					method: 'post',
					success: res => {
						this.district = res.data
					}
				});
			},
 			async getCategory(type) {
				if(type == 'doctor') {
					await uni.request({
						url: '/addons/internethospital/api.index/datadict',
						method: 'post',
						data: {
							datadict_id:18
						},
						success: res => {
							this.menu = res.data
							uni.setStorageSync('wanlshop:bookingmenu',res.data)
						}
					});
				} else {
					await uni.request({
						url: '/addons/internethospital/api.index/category',
						method: 'post',
						data: {
							type:type
						},
						success: res => {
							this.menu = res.data
							uni.setStorageSync('wanlshop:bookingmenu',res.data)
						}
					});
				}
			},
			change(){},
			// 搜索
			handleSearch(text) {
				this.$wanlshop.to(`/pages/medicalcare/bookingsystem/department?key=${text}`, 'fade-in', 100);
			},
			swichMenu(id) {
				this.currentTab = id
				//this.tabCurrent = 'tabNum'+ id

				// 滑动swiper后，每个选项距离其父元素最左侧的距离
				this.scrollLeft = 0;
				for (let i = 0; i < id; i++) {
					this.scrollLeft += 60
				};
			},
			swiperChange(e) {
				let index = e.detail.current
				this.swichMenu(index)
				this.getCategory(this.tabs[index].type)
			},
			submit(id,data) {
				// console.log(id,data);
				let list = data.forEach(item => {
					let ids = item.list.map(obj => obj.id); 
					this.form[item.type] = ids.join(',')
				})
				this.show = false
				this.form.district = id;
				
				this.$refs.list.refreshScrollView()
				this.load({page:1},'refresh')
			}
		}
	};
</script>


<style lang="scss" scoped>
	.wanlshop-container {
		background-color: #fff;
		background-repeat: no-repeat;
		> image {
			width: 690rpx;
			margin: 0 30rpx;
		}
		&__head {
			.navigater {
				height: 86rpx;
				padding-left: 25rpx;
				padding-right: 25rpx;
				/* #ifdef MP */
				padding-right: 220rpx;

				/* #endif */
				.search {
					flex: 1;
					background-color: transparent;
					height: 66rpx;
					border: 2rpx solid #fff;

					.icon {
						margin: 0 20rpx;
						color: #fff;
					}

					swiper {
						height: 100%;
						width: 100%;
						margin-right: 10rpx;

						swiper-item {
							display: flex;
							align-items: center;
						}
					}
				}
			}
		}
	}
	.record {
		border-radius: 10rpx;
		margin: 0 auto;
		width: 690rpx;
		height: 74rpx;
		padding: 0 18rpx;
		margin-top: 20rpx;
		.left {
			text {
				&:nth-child(1) {
					color: #555555;
					margin-right: 4rpx;
					font-size: 40rpx;
				}
				&:last-child {
					font-size: 28rpx;
					color: #555555;
				}
			}
		}
		.more {
			color: #AAAAAA;
			font-size: 24rpx;
		}
	}
	
	.lists {
		padding: 20rpx 30rpx 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.items {
			background-color: #fff;
			border-radius: 10rpx;
			width: calc((100% -  20rpx) / 2);
			padding: 18rpx;
			> view {
				font-family: PingFang SC-Medium, PingFang SC;
				&:nth-child(1) {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
					line-height: 40rpx;
					margin-bottom: 12rpx;
				}
				&:nth-child(2) {
					font-size: 28rpx;
					font-weight: 500;
					color: #666666;
					line-height: 33rpx;
				}
				&:last-child {
					margin-top: 32rpx;
					color: #fff;
					background-color: #4CBD66;
					border-radius: 50rpx;
					display: inline-block;
					font-size: 30rpx;
					padding: 0 20rpx;
					height: 60rpx;
					line-height: 60rpx;
				}
				text {
					&:nth-child(1) {
						font-size: 28rpx;
						margin-top: 4rpx;
					}
					&:nth-child(2) {
						font-size: 24rpx;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>

<style scoped lang="scss">
	.body-view {
		width: 100%;
		overflow: hidden;
		background-color: #FFFFFF;
		width: 690rpx;
		margin: 0 auto;
		border-radius: 10rpx;
		margin-top: 10rpx;
	}

	.top-menu-view {
		display: flex;
		white-space: nowrap;
		width: 100%;
		height: 168rpx;

		.menu-topic-view {
			width: calc(100% / 3);
			display: inline-block;
			white-space: nowrap;
			height: 168rpx;
			image {
				width: 60rpx;
				height: 60rpx;
			}
			> view {
				height: 100%;
				.menu-topic-text {
					font-size: 26rpx;
					color: #555555;
					margin-top: 18rpx;
				}
			}
			.menu-topic-act {
				text {
					color: #4CBD66;
					position: relative;
					display: flex;
					justify-content: center;
					&::after {
						width: 40rpx;
						position: absolute;
						height: 6rpx;
						border-radius: 10rpx;
						background-color: #4CBD66;
						bottom: -10rpx;
						content: "";
						display: inline-block;
					}
				}
			}
		}
	}

	.swiper-box-list {
		width: 100%;
		height: 300rpx;
		margin: 0 auto;
		flex: 1;
		background-color: #FFFFFF;
		border-top: 1rpx solid #DCDCDC;

		.swiper-topic-list {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			// align-items: center;
			flex-wrap: wrap;
			.swiper-item {
				width: 20%;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 28rpx;
				image {
					margin-bottom: 20rpx;
					width: 50rpx;
					height: 50rpx;
				}
				text {
					color: #333333;
					font-size: 24rpx;
				}
			}
		}
	}
	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	/deep/.uni-scroll-view::-webkit-scrollbar {
		display: none
	}
	
	
	.order-items {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background: #fff;
		margin: 0 18rpx;
		padding: 26rpx 16rpx;
		&:nth-child(1) {
			margin-top: 0;
		}
		> image {
			width: 112rpx;
			height: 112rpx;
			margin-right: 20rpx;
			border-radius: 50%;
		}
		.right {
			width: calc(100% - 144rpx);
			
			.title {
				color: #333333;
				font-size: 34rpx;
			}
			
			.desc {
				font-size: 26rpx;
				color: #444444;
				margin-top: 4rpx;
				text {
					line-height: 36rpx;
				}
				view {
					display: inline-block;
					line-height: 36rpx;
				}
				.t {
					color: #666666;
				}
			}
			
			.address {
				color: #777777;
				font-size: 24rpx;
				line-height: 34rpx;
				margin-top: 4rpx;
			}
			
			.tags {
				margin-top: 14rpx;
				height: 24rpx;
				text {
					font-size: 18rpx;
					margin-right: 10rpx;
					padding: 2rpx 8rpx;
					border-radius: 6rpx;
					display: inline-block;
					border: 1px solid #005ECD;
					color: #005ECD;
					&:nth-child(1) {
						border: none;
						background-color: #4CBD66;
						color: #fff;
					}
					&:last-child {
						margin-right: 0;
					}
					&:nth-child(2),&:nth-child(3) {
						border: 1px solid #4CBD66;
						color: #4CBD66;
					}
				}
			}
		}
	}
	
	.server {
		margin-top: 10rpx;
		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 85rpx;
	
			.title {
				display: flex;
				align-items: center;
	
				text {
					position: relative;
	
					&:nth-child(1) {
						font-size: 34rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #222222;
						line-height: 40rpx;
					}
	
					image {
						position: absolute;
						width: 200rpx;
						bottom: -6rpx;
						left: 20rpx;
					}
				}
			}
	
			
			.more {
				text {
					color: #AAAAAA;
					&:nth-child(1) {
						font-size: 26rpx;
					}
					&:last-child {
						font-size: 24rpx;
					}
				}
			}
		}
	
	}
	
	.head {
		.bar {
			background-color: #fff;
			.item {
				&:last-child {
					align-items: baseline;
				}
				.box {
					text {
						color: #777;
					}
				}
			}
		}
		/deep/.uni-stat__select {
			width: 180rpx;
			flex: none;
			.uni-select {
				border: none;
				.uni-select__input-box {
					flex: none;
				}
				.uni-select__input-text {
					color: #555;
				}
				/deep/.uni-icons.uniui-top,.uni-icons.uniui-bottom {
					color: #555 !important;
				}
			}
		}
	}
</style>
<style scoped>
	/deep/.u-drawer-top {
		background-color: transparent;
	}
</style>